<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${editing ? '修改' : '添加'}小程序`,
			size: '600px'
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules" :disabled="saving">
			<el-card shadow="never">
				<el-form-item label="所属事业部" prop="biz_id">
					<cl-select
						v-model="form.biz_id"
						style="width: 95%"
						placeholder="请选择事业部"
						filterable
						:disabled="editing"
						@change="changeBiz"
					>
						<el-option
							v-for="item in business"
							:key="item.biz_id"
							:label="item.biz_name"
							:value="item.biz_id"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="所属品牌" prop="bra_id">
					<cl-select
						style="width: 100%"
						v-model="form.bra_id"
						placeholder="请选择所属品牌"
						filterable
					>
						<el-option
							v-for="item in bizRefData.brand"
							:key="item.bra_id"
							:label="item.bra_name"
							:value="item.bra_id"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="小程序名称" prop="title">
					<el-input
						v-model.trim="form.title"
						placeholder="请输入小程序名称"
						style="width: 95%"
					/>
				</el-form-item>
				<el-form-item label="小程序AppId" prop="app_id">
					<el-input
						v-model.trim="form.app_id"
						placeholder="请输入小程序AppId"
						style="width: 95%"
					/>
					<!-- <icon-svg name="help" class="ml-1" @click="openHelp(1)" /> -->
				</el-form-item>
				<el-form-item label="小程序AppSecret" prop="secret">
					<el-input
						v-model.trim="form.secret"
						placeholder="请输入小程序AppSecret"
						style="width: 95%"
					/>
					<!-- <icon-svg name="help" class="ml-1" @click="openHelp(2)" /> -->
				</el-form-item>
				<el-form-item label="小程序原始ID">
					<el-input
						v-model.trim="form.origin_id"
						placeholder="请输入小程序原始ID"
						style="width: 95%"
					/>
				</el-form-item>
				<el-form-item label="域名校验文件" :prop="editing ? '' : 'ftp_name'">
					<cl-upload
						v-model="form.ftp_name"
						:action="`${baseUrl}/index/upftp`"
						:limit="1"
						accept=".txt"
						list-type="text"
						icon=""
						text="上传文件"
						:on-success="uploadSuccess"
						style="display: inline-block;"
						:data="{ bra_id: form.bra_id }"
					></cl-upload>
					<!-- <icon-svg name="help" class="ml-1" @click="openHelp(3)" /> -->
					<div class="tips">只能上传微信公众号后台下载的txt文件！</div>
				</el-form-item>
				<el-form-item label="小程序代码">
					<el-button type="primary" size="small" @click="downCode"
						>点击下载小程序代码</el-button
					>
					
				</el-form-item>
			</el-card>
		</el-form>
		<miniprogram-help ref="help"></miniprogram-help>
	</cl-drawer>
</template>
<script>
import { baseUrl } from "@/config/env";
import MiniprogramHelp from "./miniprogram-help";
export default {
	components: {
		MiniprogramHelp
	},
	data() {
		return {
			baseUrl,
			form: {
				id: "",
				biz_id: "",
				bra_id: "",
				title: "",
				app_id: "",
				secret: "",
				origin_id: "",
				ftp_name: ""
			},
			rules: {
				biz_id: [{ required: true, message: "请选择事业部" }],
				bra_id: [{ required: true, message: "请选择品牌" }],
				title: [{ required: true, message: "请填写小程序名称" }],
				app_id: [{ required: true, message: "请填写小程序AppId" }],
				secret: [{ required: true, message: "请填写小程序AppSecret" }],
				ftp_name: [{ required: true, message: "请上传域名校验文件" }]
			},
			saving: false,
			editing: false
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		async init() {
			const { biz_id } = this.form;
			this.getBizRefBrand(biz_id);
		},
		changeBiz() {
			this.form.bra_id = "";
			this.init();
		},
		open(editing = false, data = {}) {
			this.editing = editing;
			if (editing) {
				Object.keys(this.form).forEach(k => {
					this.form[k] = data[k];
				});
			}
			this.init();
			this.$refs.drawer.create();
		},
		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.saving = false;
			this.$refs.form?.resetFields?.();
			this.$resetFields(this.form);
			this.form.biz_id = this.getCurrBiz();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				await this.$service.ad[this.editing ? "editAdMini" : "setAdMini"](this.form).done(
					() => {
						this.saving = false;
					}
				);

				this.$message.success("操作成功");
				this.$emit("confirm");
				this.reset();
				this.close();
			});
		},
		uploadSuccess(res, file, fileList) {
			console.log(res, file, fileList);
			this.form.ftp_name = res.data.name || "已上传";
		},
		openHelp(index) {
			this.$refs.help.open(index);
		},
		downCode() {
			window.open(
				`https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/mp-weixin/mp-weixin.zip?v=3`,
				"__blank"
			);
		}
	}
};
</script>
<style lang="scss" scoped>
.tips {
	color: #aaa;
	font-size: 12px;
	em {
		color: red;
		font-style: normal;
	}
}
.codemirror-box {
	height: 250px;
	overflow: auto;
	.vue-codemirror {
		height: 100%;
	}
}
.ml-1 {
	cursor: pointer;
}
</style>
